<script setup>
import { reactive, ref, defineProps, defineEmits, onMounted, watch } from 'vue'
import { getMenuList, menuSubmit } from '@/api';
import { ElMessage } from 'element-plus'

const emits = defineEmits(['closed'])

const props = defineProps({
  isShowForm: Boolean,
  action: String,
  menuItem: Object,
})

const menuForm = ref()
const rules = {
  menuName: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 10, message: '菜单名称最少2位, 最多10位', trigger: 'blur' },
  ]
}

const state = reactive({
  menuForm: {
    menuType: 1,
    parentId: [null],
    menuState: 1,
  },
  menuList: []
})

onMounted(() => {
  queryMenuList();
})

watch(() => props.isShowForm, (current) => {
  console.log('current', current)
  if (current) {
    state.menuForm = {
      ...state.menuForm,
      ...props.menuItem
    }
    console.log(state.menuForm)
  }
})

const queryMenuList = async () => {
  state.menuList = await getMenuList()
}

const handelSubmit = () => {
  menuForm.value.validate(async (valid) => {
    console.log('submit: ', state.menuForm)
    try {
      if (!valid) {
        return
      }
      let str = ''
      await menuSubmit(state.menuForm)
      if (props.action === 'add') {
        // console.log('create')
        str = `添加成功`
      } else if (props.action === 'edit') {
        console.log('edit')
        str = `修改成功`
      }
      ElMessage({
        message: str,
        type: 'success'
      })
      emits('closed')
    } catch (error) {
      console.error(error)
    }

  })
}

const handelClosed = () => {
  emits('closed')
  state.menuForm = {
    menuType: 1,
    menuState: 1,
  }
}

</script>
<template>
  <el-dialog title="新建菜单" :model-value="props.isShowForm" @closed="handelClosed">
    <el-form ref="menuForm" :model="state.menuForm" :rules="rules" label-width="100">
      <el-form-item label="父级菜单" prop="parentId">
        <el-cascader v-model="state.menuForm.parentId" clearable
          :props="{ checkStrictly: true, value: '_id', label: 'menuName' }" :options="state.menuList"
          placeholder="请选择父级菜单" />
        <span style="margin-left: 10px;">不选择, 直接创建一级菜单</span>
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="state.menuForm.menuType">
          <el-radio :label="1" size="large">菜单</el-radio>
          <el-radio :label="2" size="large">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="state.menuForm.menuName" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon" v-if="state.menuForm.menuType === 1">
        <el-input v-model="state.menuForm.icon" placeholder="请输入菜单图标" />
      </el-form-item>
      <el-form-item label="路由地址" prop="path" v-if="state.menuForm.menuType === 1">
        <el-input v-model="state.menuForm.path" placeholder="请输入菜单路由地址" />
      </el-form-item>
      <el-form-item label="权限标识" prop="menuCode" v-if="state.menuForm.menuType === 2">
        <el-input v-model="state.menuForm.menuCode" placeholder="请输入权限标识" />
      </el-form-item>
      <el-form-item label="组件路径" prop="component" v-if="state.menuForm.menuType === 1">
        <el-input v-model="state.menuForm.component" placeholder="请输入组件路径" />
      </el-form-item>
      <el-form-item label="菜单状态" prop="menuState">
        <el-radio-group v-model="state.menuForm.menuState">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handelClosed">取消</el-button>
      <el-button @click="handelSubmit" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>